<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!-- Consider specifying the language of your content by adding the `lang` attribute to <html> -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <!-- Use the .htaccess and remove these lines to avoid edge case issues.
         More info: h5bp.com/i/378 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>WebService Demo</title>
    <meta name="description" content="WebService demo">

    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../js/vendor/jquery-ui/themes/base/jquery.ui.all.css">

    <link rel="stylesheet" href="../css/style.css">

    <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

    <!-- All JavaScript at the bottom, except this Modernizr build.
         Modernizr enables HTML5 elements & feature detects for optimal performance.
         Create your own custom Modernizr build: www.modernizr.com/download/ -->
    <script src="../js/vendor/modernizr-2.5.3.min.js"></script>

    <style>
    .hidden {
        display: none;
    }

    .clearfix {
        clear: both;
    }

    nav ul {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }
    </style>
</head>
<body>
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
         chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7]><p class="chromeframe">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

    <!-- Add your site or application content here -->

    <header>
      <h1 style="float: left">WebService Demo</h1>
      <div class="clearfix"></div>
    </header>

    <nav id="navigation">
      <ul>
        <li id="version">Unknown jQuery Version</li>
        <li id="ui-version">Unknown jQuery UI Version</li>
      </ul>
    </nav>

    <div id="main" role="main">
      <p>God helps those who help themselves.</p>
      <div id="toolbar">
      </div>
      <div id="content">
          <label for="path">Path:</label> <input id="path" type="text" name="path" value="Services/User" style="width: 50em;" />
          <br>

          <label for="method">Method:</label>
          <select id="method" class="combobox">
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="UPDATE">UPDATE</option>
            <option value="DELETE">DELETE</option>
          </select>

          <label for="contentType">Content Type:</label>
          <select id="contentType" class="combobox">
            <option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
            <option value="application/json">application/json</option>
          </select>

          <button id="submitButton">Send</button>

          <br>

          <div id="tabs">
            <ul>
              <li><a href="#tabs-request">Request</a></li>
              <li><a href="#tabs-response">Response</a></li>
            </ul>
            <div id="tabs-request">
              <textarea id="request" name="request" style="width: 50em; height: 20em;">{}</textarea>
            </div>
            <div id="tabs-response">
              <textarea id="response" style="width: 50em; height: 20em;"></textarea>
            </div>
          </div>

          <br>

          

      </div>
    </div>

    <footer>
      <div>Copyright &copy; 2012. All rights reserved.</div>
    </footer>

    <!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../js/vendor/jquery-1.7.2.js"><\/script>')</script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="../js/vendor/jquery-ui-1.8.18.js"><\/script>')</script>

    <script src="../js/vendor/json2.js"></script>
    <script src="../js/vendor/require.js"></script>
    <script src="../js/vendor/d3.v2.js"></script>
    <script src="../js/vendor/jsrender.js"></script>

    <!-- scripts concatenated and minified via build script -->
    <script src="../js/plugins.js"></script>
    <script src="../js/utils.js"></script>
    <!-- end scripts -->

    <script>
    // common used scripts here
    var utils = utils;

    </script>

    <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $("#version").html("jQuery: " + version);
        var uiVersion = $.ui.version;
        $("#ui-version").html("jQuery UI: " + uiVersion);

        // ui
        $(".combobox").combobox();
        $("button").button();
        var tabs = $("#tabs").tabs({
            //event: "mouseover"
        });

        // data
        var data = {"content":{"search":"","skip":0,"lines":20,"payload":{"dimension":[],"sort_by":[]}}};
        $("#request").val(JSON.stringify(data));

        // submit button
        $("#submitButton").click(function() {
            var context = "/web";
            var path = $.trim($("#path").val());
            //var url = utils.replace();
            var url = [context, path].join("/");
            var method = $("#method").val();
            var contentType = $("#contentType").val();

            var params = $.trim($("#request").val());
            params = JSON.parse(params);
            if (method === "POST" && contentType === "application/json") {
                params = JSON.stringify(params);
            }
            console.info("params", params);

            tabs.tabs("select", 1);
            $("#response").val("Loading...");

            var request = $.ajax({
                url: url,
                type: method,
                contentType: contentType,
                data: params,
                dataType: "json"
            });

            request.done(function(data) {
                $("#response").val(data);
            });

            request.fail(function(jqXHR, textStatus) {
                $("#response").val("Request failed: " + textStatus);
            });
        });
    });
    </script>
</body>
</html>
